<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
        }
        .views{
            width: 250px;
            height: 250px;
            /* border: 1px solid red; */
            margin: 350px auto;
            /* 相对定位 */
            position: relative;
            /* 设置透视效果 近大远小的效果  */
            perspective: 1000px;
        }
        .box{
            width: 100%;
            height: 100%;
            /* 绝对定位 */
            position: absolute;
            /* 设置3D元素 */
            transform-style: preserve-3d;
            /* 设置看到不同面的效果 */
            transform: rotateX(-15deg) rotateY(20deg);
            /* 添加点击过渡时间 */
            transition: all ease-in-out .3s;
        }
        /* 设置六个面 */
        .face{
            width: 100%;
            height: 100%;
            /* 绝对定位 */
            position: absolute;
            text-align: center;
            color: #fff;
            line-height: 250px;
            /* 添加自定义动画效果  ease-in-out过度类型*/
            /* animation: all ease-in-out .3s; */
            transition: all ease-in-out .3s;
        }

        /* 关键帧 */
        @keyframes box{
            0%{
                transform: rotateX(0) rotateY(0);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .box:hover{
            animation: box 4.5s linear infinite;
        }
        .box:hover .face{
            box-shadow: 1px 1px 100px red;
        }
        input{
            display: none;
        }
        label{
            width: 6em;
            height: 3em;
            border: 1px solid #fff;
            display: inline-block;
            border-radius: 8px;
            color: #fff;
            text-align: center;
            line-height: 3em;
            /* 添加过渡效果 */
            transition: all 0.6s;
            /* animation: all linear .3s; */
        }
        label:hover{
            background-image: linear-gradient(to left,#fff,black);
            box-shadow: 1px 1px 30px #fff;
        }
        input:checked+label{
            background-image: linear-gradient(to left,#fff,black);
            box-shadow: 1px 1px 30px #fff;
            margin-left: 18%;
            margin-top: 100px;
            transform: translateY(-15px);
        }
        /* 设置六个面的位置 */
        /* 正面 */
        .front{
            transform:translate3d(0,0,125px);
        }
        /* 反面 */
        .back{
            transform: rotateY(180deg) translate3d(0,0,125px);
        }
        /* 左边 */
        .left{
            transform: rotateY(-90deg) translate3d(0,0,125px);
        }
        /* 右边 */
        .right{
            transform: rotateY(90deg) translate3d(0,0,125px);
        }
        /* 上面 */
        .top{
            transform: rotateX(90deg) translate3d(0,0,125px);
        }
        .bottom{
            transform: rotateX(-90deg) translate3d(0,0,125px);
        }
        /* 六个面阴影 */
        .box div:nth-child(1){
            background-image: linear-gradient(25deg, #5f36b4, #9a5e9b, #c5887f, #e8b35c);
        }

        .box div:nth-child(2){
            background-image: linear-gradient(25deg, #6d477d, #933d5a, #af2f37, #c6130c);
        }

        .box div:nth-child(3){
            background-image: linear-gradient(25deg, #a40c0f, #c21632, #e12054, #ff2b77);
        }
        .box div:nth-child(4){
            background-image: linear-gradient(25deg, #fa002f, #fc3854, #fb5379, #f7699f);
        }
        .box div:nth-child(5){
            background-image: linear-gradient(116deg, #df4034, #e3735d, #e09d89, #d5c5b6)
        }

        .box div:nth-child(6){
            background-image: linear-gradient(25deg, #eb1f13, #ef6715, #f09518, #edbf1d);
        }

        /* 设置六个面旋转的位置 */
        /* 正面 */
        #front:checked~.views .box{
            transform: rotateX(-15deg) rotateY(20deg);
        }

        /* 反面 */
        #back:checked~.views .box{
            transform: rotateX(-15deg) rotateY(200deg);
        }
        
        /* 左边 */
        #left:checked~.views .box{
            transform: rotateX(-20deg) rotateY(110deg);
        }

        /* 右边 */
        #right:checked~.views .box{
            transform: rotateX(-15deg) rotateY(-70deg);
        }

        /* 上面 */
        #top:checked~.views .box{
            transform: rotateY(20deg) rotateX(-90deg);
        }

        /* 下面 */
        #bottom:checked~.views .box{
            transform: rotateY(20deg) rotateX(90deg);
        }

        /* 放大 */
        /* 给放大的按钮添加一个关键帧 */
        #big:checked~.views .box{
            transform: scale(2) rotateX(15deg) rotateY(20deg);
        }

        /* 缩放 */
        #small:checked~.views .box{
            transform: scale(0.3) rotateX(-15deg) rotateY(-20deg);
        }

        /* 旋转 */
        @keyframes rotate{
            0%{
                transform: rotateX(0) rotateY(0);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        #rotate:checked~.views .box{
            animation: rotate 3s linear infinite;
        }

        #rotate:checked~.views .box .face{
            box-shadow: 1px 1px 100px #fff;
        }

        /* 展开 */
        #open:checked~.views .box .front{
            transform: translate3d(0,0,300px);
        }

        #open:checked~.views .box .back{
            transform:rotateY(180deg) translate3d(0,0,300px);
        }
        
        #open:checked~.views .box .left{
            transform: rotateY(-90deg) translate3d(0,0,300px);
        }

        #open:checked~.views .box .right{
            transform: rotateY(90deg) translate3d(0,0,300px);
        }

        #open:checked~.views .box .top{
            transform: rotateX(90deg) translate3d(0,0,300px);
        }

        #open:checked~.views .box .bottom{
            transform: rotateX(-90deg) translate3d(0,0,300px);
        }
        /* 发光 */
        @keyframes btn{
            0%{}
            100%{
                box-shadow: 1px 1px 100px red;
            }
        }

        #btn:checked~.views .box .face{
            animation: btn .3s linear infinite;
        }

        /* 变色 */
        #btn1:checked~.views .box .front{
            background-image: linear-gradient(25deg, #380fe8, #5c3cdb, #705acd, #7d76bf);
        }

        #btn1:checked~.views .box .back{
            background-image: linear-gradient(25deg, #1e00fd, #313bf3, #3659e9, #3173df);
        }

        #btn1:checked~.views .box .left{
            background-image: linear-gradient(25deg, #fe098b, #d769a9, #a192c9, #1ab2ea);
        }
        #btn1:checked~.views .box .right{
            background-image: linear-gradient(25deg, #0e00f2, #425ff6, #459cf9, #00d8fb);
        }

        #btn1:checked~.views .box .top{
            background-image: linear-gradient(25deg, #36ab4f, #41a87d, #3da5a9, #1ca2d4);
        }
        #btn1:checked~.views .box .bottom{
            background-image: linear-gradient(25deg, #03b4e9, #9ec3b2, #d6d476, #ffe512)
        }

        /* 移动 */
        @keyframes btn2{
            0%{
            }
            100%{
                transform: translateY(-450px);
            }
        }
        #btn2:checked~.views .box{
             /*animation-direction:alternate;    动画先正常运行再反方向运行，并持续交替运行*/
            animation: btn2 2s linear infinite alternate;
        }
    </style>
</head>
<body>
    <!-- 正面按钮 -->
    <input type="radio" name="box" id="front" checked>
    <label for="front">正面</label>

    <!-- 反面按钮 -->
    <input type="radio" name="box" id="back">
    <label for="back">反面</label>

    <!-- 左边按钮 -->
    <input type="radio" name="box" id="left">
    <label for="left">左边</label>

    <!-- 右边按钮 -->
    <input type="radio" name="box" id="right">
    <label for="right">右边</label>

    <!-- 上面按钮 -->
    <input type="radio" name="box" id="top">
    <label for="top">上面</label>

    <!-- 下面按钮 -->
    <input type="radio" name="box" id="bottom">
    <label for="bottom">下面</label>

    <!-- 放大 -->
    <input type="radio" name="box" id="big">
    <label for="big">放大</label>

    <!-- 缩小 -->
    <input type="radio" name="box" id="small">
    <label for="small">缩小</label>

    <!-- 旋转 -->
    <input type="radio" name="box" id="rotate">
    <label for="rotate">旋转</label>

    <!-- 展开 -->
    <input type="radio" name="box" id="open">
    <label for="open">展开</label>

    <!-- 发光 -->
    <input type="radio" name="box" id="btn">
    <label for="btn">发光</label>

    <!-- 变色 -->
    <input type="radio" name="box" id="btn1">
    <label for="btn1">变色</label>

    <!-- 移动 -->
    <input type="radio" name="box" id="btn2">
    <label for="btn2">移动</label>
  


    <div class="clear"></div>
    <!-- 3D空间 -->
    <div class="views">
        <!-- 3D元素 -->
        <div class="box">
            <div class="face front">
                <!-- <img src="" alt=""> -->
                正面
            </div>
            <div class="face back">
                <!-- <img src="" alt=""> -->
                反面
            </div>
            <div class="face left">
                <!-- <img src="" alt=""> -->
                左边
            </div>
            <div class="face right">
                <!-- <img src="" alt=""> -->
                右边
            </div>
            <div class="face top">
                <!-- <img src="" alt=""> -->
                上面
            </div>
            <div class="face bottom">
                <!-- <img src="" alt=""> -->
                下面
            </div>
        </div>
    </div>
</body>
</html>